<template>
  <!--用户行为日期展示框-->
  <div id="userDate">
    <el-input
        clearable
        class="search"
        placeholder="搜索"
        prefix-icon="el-icon-search"
        @input="filters"
        v-model="search"
    >
    </el-input>


    <!--    卡片选择-->
    <div class="selectCard">
      <el-button
          class="attribute"
          v-for="(item, index) in tabsParam"
          :key="index"
          :class="{'act':scrolltop >=item.scroll && scrolltop < (tabsParam[index+1]?tabsParam[index+1].scroll:9000)}"
          @click="jump(item.scroll+2)"
      >{{ item.name }}
      </el-button>
    </div>

    <div class="nav">
      <!--      事件属性-->
      <div class="eventThing" ref="eventThing" @scroll="wscroll">
        <div class="part">
          <i class="el-icon-full-screen"></i>
          {{ userday ? userday.cname : '用户行为日期' }}用户行为日期</div>

        <el-divider
            content-position="left"
            v-show="nowIndex === 0"
        >事件属性
        </el-divider>
        <div class="part"
             v-for="(item,index) in events"
             :key="index"
             @click="eventProperties(item)"
        >
          <i class="el-icon-full-screen"></i>
          {{ item.cname }}
        </div>

        <el-divider
            content-position="left"
            v-show="nowIndex === 1"
            :class="{'act':scrolltop >=200 && scrolltop < 400}"
            @click="jump(200)"
        >用户属性
        </el-divider>
        <div class="part"
        >VIP等级
        </div>

        <el-divider
            content-position="left"
            v-show="nowIndex === 2"
            :class="{'act':scrolltop >=400 && scrolltop < 600}"
            @click="jump(400)"
        >用户分群
        </el-divider>
        <div class="part"
        >分群298
        </div>

        <el-divider
            content-position="left"
            v-show="nowIndex === 3"
            :class="{'act':scrolltop >=600 && scrolltop < 800}"
            @click="jump(600)"
        >用户标签
        </el-divider>

        <el-collapse accordion>
          <el-collapse-item
              class="part"
          >
            <template slot="title">
              <i class="header-icon el-icon-info"></i>
              活跃标签
            </template>
            <div class="tabPart">访问活跃度</div>
            <div class="tabPart">流失用户</div>
            <div class="tabPart">最后一个活跃距今天数</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import {events} from "./spread.config";

export default {
  name: "userDate",
  data() {
    return {
      input: '',
      search: "",    //搜索关键字
      dataList:[],    //筛选前
      tabsParam: [
        {name:"事件属性",scroll:0},
        {name:"用户属性",scroll:800},
        {name:"用户分群", scroll:1000},
        {name:"用户标签",scroll:1200}],
      nowIndex: 0,
      isShow: false,
      scrolltop: 0,
      userEvent: '用户行为日期',
      userday: '用户行为日期',
      userClose: false,

      events: [],
      tabs: [],
      cluster: [],
      users: [],
    };
  },
  mounted() {
    this.eventProperties()
  },
  methods: {
    filters() {
      if(this.search.length>0){
        let list = this.dataList.filter(item => item.cname.indexOf(this.search) > -1);
        this.events = list;
      }else{
        this.events = this.dataList;
      }
    },
    //切换tab项
    toggleTabs(index) {
      this.nowIndex = index;
    },
    wscroll() {
      this.scrolltop = this.$refs.eventThing.scrollTop;
      console.log(this.scrolltop)
    },
    jump(num) {
      this.$refs.eventThing.scrollTop = num
    },
    //事件属性
    eventProperties(item) {
      events({
        req: {
          events: ["events"],
          type: "event",
          needEventTime: true
        },
        operationCtx: {}
      }).then(res => {
        this.dataList=res.data.value.list;
        this.events=res.data.value.list;
        console.log(res.data.value.list)
      }).catch(error => {
        console.log("error=", error)
      });


      this.$emit('userEvent',item);

      this.userClose = !this.userClose
    },
  }
};
</script>

<style lang="scss" scoped>
#userDate {
  width: 320px;
  height: auto;
  border: 1px solid #cccccc;
  position: absolute;
  background-color: #ffffff;
  z-index: 101;

  .selectCard {
    display: flex;
    justify-content: space-between;
    margin: 10px;

    .attribute {
      width: 65px;
      height: 25px;
      line-height: 5px;
      padding: 0 10px;
      font-size: 10px;
    }
  }

  .nav {
    .eventThing {
      height: 350px;
      overflow-y: scroll;

      .title {
        font-size: 12px;
        color: #475669;
        font-weight: 500;
      }

      .part{
        overflow-y: auto;
        padding: 5px 0 5px 30px;
        &:hover{
          background-color: #e0e6ed;
          cursor: pointer;
        }
      }

      .part2{
        padding: 5px 35px;
      }

      .tabPart {
        padding-left: 30px;
      }
    }
  }

  .act {
    background-color: #00b265;
    color: white;
    border-color: #00b265;
  }

}
</style>

<style lang="scss" scoped>
::v-deep.el-input--prefix .el-input__inner {
  border: none;
  border-bottom: 1px solid #cccccc;
  border-radius: 0;
  height: 32px;
}

::v-deep.el-input__icon {
  line-height: 33px;
}

::v-deep.el-divider__text {
  padding: 0;
}

::v-deep.el-divider--horizontal {
  margin: 20px 0;
}

::v-deep.el-collapse {
  border-top: none;
}

::v-deep .el-collapse-item__header {
  border-bottom: none;
  height: 38px;
}

::v-deep.el-collapse-item__content {
  line-height: 2.3;
}

::v-deep.el-input--prefix .el-input__inner {
  border-radius: 0;
}

::v-deep.el-collapse-item__wrap{
  border-bottom: none;
}
</style>
